<!DOCTYPE html>
<html>
<head>
	<title>易儒如斯 纲领页</title>
	
	<link rel="stylesheet" href="{CSS_PATH}yrrs/lite-top.css">
	<link rel="stylesheet" href="{CSS_PATH}yrrs/base.css">
	<link rel="stylesheet" type="text/css" href="{CSS_PATH}yrrs/daoshengshunxiang.css">
	<link rel="stylesheet" href="{CSS_PATH}yrrs/footer.css">
	<script type="text/javascript" src="{JS_PATH}yrrs/jquery.min.js"></script>
	<meta charset="utf-8"/>
	<style type="text/css">
	
		.center-wrap{
			min-height:2510px;
			height:auto;
			padding-top: 100px;
			width: 980px;
		}
		.left{
			width: 960px;
			float: left;
			height: 2300px;
		}
		.right{
			float: right;
			position: relative;
			left: -3px;
			top: 10px;
			width: 1px;
			border: none;
			background-color: #383838;
			height:2300px;
		}

		.circle{
			width: 16px;
			height: 16px;
			border-radius: 8px;
			background-color: #383838;
			position: relative;
			left: -7px;
			float: left;
		}

		.circle div{
			position: relative;
			width: 200px;
			line-height: 15px;
			left: 22px;
			display: none;
		}
		#c-1{
			top: 40px;
		}
		#c-2{
			top: 58px;
		}
		#c-3{
			top: 76px;
		}
		#c-4{
			top:94px;
		}

		#c-1 div{
			
		}
		.test{
			position: fixed;
			bottom: 0px;
			left: 0px;
		}
	</style>
</head>
<body>
	<div class="top">
		<div class="login lh24 blue"><span class="rt"><script type="text/javascript">document.write('<iframe src="{APP_PATH}index.php?m=member&c=index&a=mini_float&forward='+encodeURIComponent(location.href)+'&siteid={get_siteid()}" allowTransparency="true"  width="1351" height="24" frameborder="0" scrolling="no"></iframe>')</script></span></div>
        <div class="top-center-wrap">
            <a href="{APP_PATH}" ><div class="logo"></div></a>
            <ul class="menu" id="top-lite">
                <li class="m-li"><a href="{APP_PATH}" >首页</a>
                    </li>
                    <!-- 获取概述的链接内容 -->
                    {pc:content action="lists" catid="30" order="id DESC" num="1" moreinfo="1"}
                    <?php
                        $gaishu_url = $data[2]['url'];//此处1为id号
                    ?>
                    {/pc}
                    <li class="m-li"><a href="{$gaishu_url}" target="_blank">概述</a></li>
                    <li class="m-li">
                        <a href="" >易如斯</a>
                        <ul class="drop">
                            {pc:content action="category" catid="6" num="15" siteid="$siteid" order="listorder ASC"}
                                {loop $data $c}
                                <li><a href="{$c[url]}" title="{$c[catname]}">{str_cut($c[catname],45,'...')}</a></li>
                                {/loop}
                            {/pc}
                            {pc:content action="category" catid="7" num="15" siteid="$siteid" order="listorder ASC"}
                                {loop $data $c}
                                <li><a href="{$c[url]}" title="{$c[catname]}">{str_cut($c[catname],28,'...')}</a></li>
                                {/loop}
                            {/pc}
                        </ul>   
                    </li>
                    <li class="m-li">
                        <a href="" >儒如斯</a>
                        <ul class="drop">
                            {pc:content action="category" catid="8" num="15" siteid="$siteid" order="listorder ASC"}
                                {loop $data $c}
                                <li><a href="{$c[url]}" title="{$c[catname]}">{str_cut($c[catname],45,'...')}</a></li>
                                {/loop}
                            {/pc}
                            {pc:content action="category" catid="9" num="15" siteid="$siteid" order="listorder ASC"}
                                {loop $data $c}
                                <li><a href="{$c[url]}" title="{$c[catname]}">{str_cut($c[catname],28,'...')}</a></li>
                                {/loop}
                            {/pc}
                        </ul>
                    </li>
                    <li class="m-li">
                        <a href="" >古文辨析</a>
                        <ul class="drop">
                            {pc:content action="category" catid="32" num="15" siteid="$siteid" order="listorder ASC"}
                                {loop $data $c}
                                <li><a href="{$c[url]}" title="{$c[catname]}">{str_cut($c[catname],45,'...')}</a></li>
                                {/loop}
                            {/pc}
                        </ul>   
                    </li>
                    {pc:content action="lists" catid="29" order="id DESC" num="1" moreinfo="1"}
                    <?php
                        $new_activity_url = $data[1]['url'];//此处1为id号
                    ?>
                 {/pc}
                <li class="m-li"><a href="{$new_activity_url}" target="_blank">最新活动</a></li>
                <li class="m-li">
                    <a href="" >关于我们</a>
                    <ul class="drop">
                        {pc:content action="lists" catid="31" num="15" siteid="$siteid" order="listorder ASC"}
                            {loop $data $c}
                            <li><a href="{$c[url]}" title="{$c['title']}" target="_blank">{str_cut($c['title'],45,'...')}</a></li>
                            {/loop}
                        {/pc}
                    </ul>   
                </li>
                </ul>
        </div>
        <!-- 导航栏下拉子栏目的js -->
        <script src="{JS_PATH}jquery-1.4.4.min.js" type="text/javascript" charset="utf-8"></script>
        <script type="text/javascript">
            $(".m-li").hover(function(){
                $li = $(this);
                $li.find(".drop").slideDown(0);
            });
            $(".m-li").mouseleave(function(){
                $li = $(this);
                $li.find(".drop").hide(0);
            });
            $(".drop").hover(function(){
                $li = $(this);
                $li.slideDown(0);
            });
            $(".drop").mouseleave(function(){
                $li = $(this);
                $li.hide(0);
            });
        </script>
	</div>
	<div class="center-wrap">
		<div id="title"><img src="{IMG_PATH}yrrs/gangling.png"/></div>
		<!-- <div id="pointer">
			<div><a href="#gangling1" class="cupo"></a></div>
			<div><a href="#gangling2"></a></div>
			<div><a href="#gangling3"></a></div>
			<div><a href="#gangling4"></a></div>
		</div> -->
		<?php
			function cutUTF8String($string,$cut="</br>") {
    			$length = strlen($string);
    			$retstr = '';
    			for ($i=0;$i<$length;$i++) {
        		if(ord($string[$i]) > 127){
           			$retstr .= $string[$i];
           			$retstr .= $string[++$i];
           			$retstr .= $string[++$i];
        		}else{
        		    $retstr .= $string[$i];
        		}
        			$retstr .= $cut;
    			}
   				 return $retstr;
			}
		?>
		<div class="right">
		<?php $num=0;?>
		{pc:content action="lists" catid="$catid" num="15" order="id ASC" page="$page"}
        {loop $data $r}
        <?php $num++; ?>
			<div class="circle" id="c-{$num}">
				<div>{str_cut($r[title],75,'......')}</div>
			</div><!--  -->
		{/loop}
	    {/pc}
	    </div><!--  -->
		<div class="left">
		{pc:content action="lists" catid="$catid" num="15" order="id ASC" page="$page"}
		<?php $num1=0;?>
        {loop $data $r}
        <?php $num1++; ?>
			<div id="gangling{$num}" class="gangling-box">
				<img src="{IMG_PATH}yrrs/gangling{$num1}.png"/>
				<div class="gangling-psg">
					<h1><?php echo cutUTF8String($r[title]); ?></h1>
					<p>{str_cut($r[description],80,'</br>.</br>.</br>.</br>.</br>.</br>.')}</p>
					<a href="{$r[url]}">点击展开阅读∨ ∨</a>
				</div>
			</div>
	{/loop}
	{/pc}
	</div><!-- / -->
	</div><!-- / -->
	<div class="test">
		
	</div><!-- / -->
	<div class="footer">
		<div class="footer-wrap">
			<div class="footer-left-container">
				<div class="footer-logo">
				</div><!-- / -->
				<div class="footer-company-info">
					<p>Copyright © 2014 www.yirurusi.com All Rights Reserved.</p>
                    <p>粤ICP备11066187号</p>
				</div><!-- / -->
			</div><!-- / -->
			<div class="footer-right-container">
				<ul>
					<li><a href="{APP_PATH}index.php?m=content&c=index&a=show&catid=31&id=1" target="_blank">关于我们</a></li>
					<li><a href="{APP_PATH}index.php?m=content&c=index&a=show&catid=31&id=4">网站声明</a></li>
                    <div class="footer-company-info">
                    <p>新浪微博：@易儒如斯</p>
                    <p>微信公众号：易儒如斯</p>
                    </div>
				</ul>
			</div>
		</div>
	</div>
	<script  type="text/javascript" charset="utf-8">
	var pre = 0;
	var c = [];
	c[0] = $("#c-1");
	c[1] = $("#c-2");
	c[2] = $("#c-3");
	c[3] = $("#c-4");
  			function step0(){
  				$('.circle div').hide();
				$('.circle div').css("color","#383838");
				$('.circle').css('background-color',"#383838");
  				c[0].animate({top:'40px'},200);
  				c[1].animate({top:'58px'},200);
  				c[2].animate({top:'76px'},200);
  				c[3].animate({top:'94px'},200);
  			}

  			function step1(){
  				$('.circle div').hide();
				$('.circle div').css("color","#383838");
				$('.circle').css('background-color',"#383838");
  				c[0].find("div").show();
  				c[0].find("div").css('color',"#e87627");
  				c[0].css('background-color',"#e87627");
  				c[0].animate({top:'40px'},200);
  				c[1].animate({top:'108px'},200);
  				c[2].animate({top:'126px'},200);
  				c[3].animate({top:'144px'},200);
  			}
  			function step2(){
  				$('.circle div').hide();
				$('.circle div').css("color","#383838");
				$('.circle').css('background-color',"#383838");
  				c[1].find("div").show();
  				c[1].find("div").css('color',"#e87627");
  				c[1].css('background-color',"#e87627");
  				c[0].animate({top:'512px'},200);
  				c[1].animate({top:'620px'},200);
  				c[2].animate({top:'728px'},200);
  				c[3].animate({top:'746px'},200);
  			}
  			function step3(){
  				$('.circle div').hide();
				$('.circle div').css("color","#383838");
				$('.circle').css('background-color',"#383838");
  				c[2].find("div").show();
  				c[2].find("div").css('color',"#e87627");
  				c[2].css('background-color',"#e87627");
  				c[0].animate({top:'1010px'},200);
  				c[1].animate({top:'1028px'},200);
  				c[2].animate({top:'1136px'},200);
  				c[3].animate({top:'1246px'},200);
  			}
  			function step4(){
  				$('.circle div').hide();
				$('.circle div').css("color","#383838");
				$('.circle').css('background-color',"#383838");
  				c[3].find("div").show();
  				c[3].find("div").css('color',"#e87627");
  				c[3].css('background-color',"#e87627");
  				c[0].animate({top:'1670px'},200);
  				c[1].animate({top:'1688px'},200);
  				c[2].animate({top:'1706px'},200);
  				c[3].animate({top:'1814px'},200);
  			}
  			$(document).scroll(
		function(e){
			//top = $(document).scrollTop();
				/*if($(document).scrollTop()>=450){
					$(".top-lite").fadeIn();
				}else{
					$(".top-lite").hide();
				}*/
				//$(".test").html($(document).scrollTop());
				
				//$("html,body").animate({scrollTop:$(document).scrollTop()+100},1500);
				if($(document).scrollTop()>pre)
				{	
					if($(document).scrollTop()<100){
						step0();
					}else if($(document).scrollTop()<600){
						step1();
					}else if($(document).scrollTop()<1100){
						step2();
					}else if($(document).scrollTop()<1700){
						step3();
					}else{
						step4();
					}
				}else{
					if($(document).scrollTop()<80){
						step0();
					}else if($(document).scrollTop()<109){
						step1();
					}else if($(document).scrollTop()<609){
						step2();
					}else if($(document).scrollTop()<1109){
						step3();
					}else{
						step4();
					}
				}

				pre = $(document).scrollTop();

		}
	);
	</script>
</body>
</html>